import { routes } from '@/routes';
import { IMenu, IRoute } from '@/types';
import { Menu, MenuProps } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

function generateMenuData(data: IMenu[], parentKey: string = ''): IMenu[] {
    const menuData: IMenu[] = [];
    data.map((item) => {
        if (item.media?.isHide) return;
        let obj: IMenu;
        if (item.children && item.children.length) {
            obj = {
                name: item.name,
                label: item.name,
                path: parentKey ? parentKey + '/' + item.path : item.path,
                key: parentKey ? parentKey + '/' + item.path : item.path,
                icon:
                    typeof item.icon === 'string' ? (
                        <i className={`iconfont ${item.icon}`}></i>
                    ) : (
                        ''
                    ),
                children: item.children && generateMenuData(item.children, item.path),
            };
        } else {
            obj = {
                name: item.name,
                label: item.name,
                path: parentKey ? parentKey + '/' + item.path : item.path,
                icon:
                    typeof item.icon === 'string' ? (
                        <i className={`iconfont ${item.icon}`}></i>
                    ) : (
                        ''
                    ),
                key: parentKey ? parentKey + '/' + item.path : item.path,
                children: null,
            };
        }
        menuData.push(obj);
    });
    return menuData;
}

const SideMenu = () => {
    const menuData = generateMenuData(routes);
    const pathSnippets = window.location.pathname.split('/').filter((i) => i);
    const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<string[]>([]);
    const [defaultOpenKeys, setDefaultOpenKeys] = useState<string[]>([]);
    const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
        setDefaultOpenKeys(keys);
    };
    useEffect(() => {
        let menuPath = pathSnippets.reduce((acc: Array<string>, cur) => {
            acc.push(acc[acc.length - 1] ? acc[acc.length - 1] + '/' + cur : '/' + cur);
            return acc;
        }, []);
        if (menuPath.length === 1) {
            menuData.forEach((item) => {
                if (item.key === menuPath[0] && item.children) {
                    menuPath.push(item.children[0].key);
                }
            });
        }
        menuPath = menuPath.reverse();
        setDefaultSelectedKeys([menuPath[0]]);
        setDefaultOpenKeys([menuPath[1]]);
    }, []);

    const nav = useNavigate();
    return (
        <Menu
            selectedKeys={defaultSelectedKeys}
            openKeys={defaultOpenKeys}
            mode="inline"
            theme="dark"
            onClick={(e) => {
                console.log(e);
                setDefaultSelectedKeys([e.keyPath[0]]);
                nav(e.keyPath[0]);
            }}
            onOpenChange={onOpenChange}
            items={menuData as any}
        ></Menu>
    );
};
export default SideMenu;
